<template>
	<section class="body">
		<h3>表单</h3>
		<div class="form">
			<!-- 用户名 -->
			<item :value="input.username" label="用户名"/>
			<!--
			<div class="row">
				<label for="">用户</label>
				<input type="text" class="username" placeholder="用户名" v-model="input.username">
			</div>
			-->
			<!-- 密码 -->
			<div class="row">
				<label for="">密码</label>
				<input type="password" class="password" placeholder="密码" v-model="input.password">
			</div>
			<div class="row">
				<a href="javascript:void(0);" @click="submitFn()">提交</a>
				<a href="javascript:void(0);" @click="resetFn">重置</a>
			</div>
		</div>
		<div class="wrapper">
			<div class="row"><label for="">用户</label>{{submit.username}}</div>
			<div class="row"><label for="">密码</label>{{submit.password}}</div>
		</div>
	</section>
</template>
<script type="text/javascript">
	import item from './components/item.vue'

	export default {
		data() {
			return {
				input: {
					username: "",
					password: ""
				},
				submit: {
					username: "",
					password: ""
				}
			}
		},
		methods: {
			submitFn () {
				this.submit.username = this.input.username
				this.submit.password = this.input.password
			},
			resetFn () {
				this.input = {
					username: "",
					password: ""
				}
				this.submit = {
					username: "",
					password: ""
				}
			}
		},
		components: {
			item
		}
	}
</script>
<style type="text/css">
	.body {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
	}
</style>